<template>
  <section class="about">
    <div class="section-content row">
      <h1>一天摆烂一天爽，天天摆烂天天爽</h1>
      <p class="typography-hero-intro">昨天在摆烂，今天摆烂中，明天将摆烂</p>
    </div>
  </section>
  <section class="about">
    <div v-for="(scenery, index) in data.list" :key="index" class="section-content">
      <Transition :duration="550" name="nested" appear>
        <div>
          <el-row :gutter="20" v-if="scenery.size === 2">
            <el-col v-for="( place, index ) in scenery.places" :key="index" :span="12">
              <SceneryView :scenery="place" />
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="scenery.size === 1">
            <el-col :span="24">
              <SceneryView3 :scenery="scenery.places[0]" />
            </el-col>
          </el-row>
        </div>
      </transition>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import SceneryView from "./SceneryView.vue";
import SceneryView3 from "./SceneryView3.vue";
import axios from '../../request';
import {Scenery,SceneryData} from '../../type/scenery';

export default defineComponent({
  name: "head-view",
  components: {
    SceneryView,
    SceneryView3
  },

  setup() {
    const data = reactive(new SceneryData());
    // 请求需要的参数
    const parms = axios.get<Scenery[]>("/dataIntroduce.json");
    parms.then((res)=>{
      data.list = res.data;
    });

    return {
      data,
    };
  },
});
</script>

<style>
.about {
  background-color: #ecf5ff;
}

.section-content {
  text-align: center;
  padding-top: 40px;
  padding-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1380px;
  width: 100%;

  opacity: 1;
  transform: translateY(0);
}

.typography-hero-intro {
  font-size: 30px;
  font-weight: 600;
  color: #86868b;
  margin-top: 0.8em;
}
</style>